import './App.css';
import { BrowserRouter as Router, Routes, Route, NavLink } from 'react-router-dom';
import Home from './pages/Home';
import ProfilePage from './pages/ProfilePage';
import ChatPage from './pages/ChatPage';
import PostCreatePage from './pages/PostCreatePage';

function App() {
  return (
    <Router>
      <div className="App">
        {/* 导航栏组件：优化版 */}
        <nav className="bg-white shadow-lg fixed top-0 left-0 w-full z-50">
          <div className="container mx-auto px-6"> {/* 增大左右间距到px-6 */}
            <div className="flex justify-between items-center h-16">
              
              {/* Logo 区域 */}
              <div className="text-xl font-bold text-blue-600 flex items-center">
                <span className="mr-2">📌</span> {/* 添加图标装饰 */}
                MyApp
              </div>

              {/* 导航链接区域 */}
              <div className="flex space-x-4"> {/* 基础间距，配合padding实现更大间隔 */}
                <NavLink 
                  to="/" 
                  className={({ isActive }) => 
                    isActive ? 
                    "text-blue-600 font-medium px-3 py-2 bg-blue-50 rounded-md transition-colors" : 
                    "text-gray-600 hover:text-blue-600 px-3 py-2 transition-colors"
                  }
                  end
                >
                  首页
                </NavLink>

                <NavLink 
                  to="/chat" 
                  className={({ isActive }) => 
                    isActive ? 
                    "text-blue-600 font-medium px-3 py-2 bg-blue-50 rounded-md transition-colors" : 
                    "text-gray-600 hover:text-blue-600 px-3 py-2 transition-colors"
                  }
                >
                  聊天
                </NavLink>

                <NavLink 
                  to="/profile" 
                  className={({ isActive }) => 
                    isActive ? 
                    "text-blue-600 font-medium px-3 py-2 bg-blue-50 rounded-md transition-colors" : 
                    "text-gray-600 hover:text-blue-600 px-3 py-2 transition-colors"
                  }
                >
                  发现
                </NavLink>

                <NavLink 
                  to="/postcreate" 
                  className={({ isActive }) => 
                    isActive ? 
                    "text-blue-600 font-medium px-3 py-2 bg-blue-50 rounded-md transition-colors" : 
                    "text-gray-600 hover:text-blue-600 px-3 py-2 transition-colors"
                  }
                >
                  用户
                </NavLink>
              </div>
            </div>
          </div>
        </nav>
        
        {/* 内容区域：调整顶部间距，避免被导航栏遮挡 */}
        <div className="pt-20 pb-10 min-h-screen">
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/profile" element={<ProfilePage />} />
            <Route path="/chat" element={<ChatPage />} />
            <Route path="/postcreate" element={<PostCreatePage />} />
          </Routes>
        </div>
      </div>
    </Router>
  );
}

export default App;